<template>
  <div>
    <component
      v-for="pageName of headPages"
      :container="container"
      :is="pageName"
      :data-page-id="getPageId(pageName)"
      :data-page-type="pageName"
      :propsData="getPropsData(pageName)"
      :key="getPageId(pageName)"
      :contenteditable="false"
    />
    <Content
      v-for="item of contentPages"
      :container="container"
      :key="item.pageId"
      :data-page-id="item.pageId"
      :data-page-type="'content'"
      :data-content-page-type="item.dataType"
      :propsData="item"
      :contenteditable="false"
    />
    <Annex
      v-for="item of annexPages"
      :container="container"
      :key="item.pageId"
      :data-page-id="item.pageId"
      :data-page-type="'annex'"
      :propsData="item"
      :data-annex-type="item.pageType"
      :data-annex-number="item.annexNumber"
      :data-annex-name="item.annexName"
      :contenteditable="false"
    />
    <component
      v-for="pageName of tailPages"
      :container="container"
      :is="pageName"
      :data-page-id="getPageId(pageName)"
      :data-page-type="pageName"
      :propsData="getPropsData(pageName)"
      :key="getPageId(pageName)"
      :contenteditable="false"
    />
  </div>
</template>

<script>
import Cover from './pages/Cover.vue'
import Annex from './pages/Annex.vue'
import Content from './pages/Content.vue'
import Contents from './pages/Contents.vue'
import Foreword from './pages/Foreword.vue'
import Index from './pages/Index.vue'
import IndexEn from './pages/IndexEn.vue'
import Introduction from './pages/Introduction.vue'
import Reference from './pages/Reference.vue'
import Revision from './pages/Revision.vue'
import Signature from './pages/Signature.vue'
import { isAnnexByType } from '@/constants/structure'
import { assignContentPageFields, assignPageFields } from '@/utils/helpers'

export default {
  props: {
    container: {
      type: String,
      default: '.left-wrapper'
    },
    pageList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Cover,
    Annex,
    Content,
    Contents,
    Foreword,
    Index,
    IndexEn,
    Introduction,
    Reference,
    Revision,
    Signature
  },
  computed: {
    pageTypes() {
      return this.pageList.map((i) => i.pageType)
    },
    headPages() {
      const arr = ['foreword', 'introduction'] // 'cover', 'signature', 'revision', 'contents', 这四个页面不显示差异
      return arr.filter((i) => this.pageTypes.includes(i))
    },
    contentPages() {
      return this.pageList.filter((item) => item.pageType === 'content').map(assignContentPageFields)
    },
    annexPages() {
      return this.pageList.filter((item) => isAnnexByType(item.pageType)).map(assignPageFields)
    },
    tailPages() {
      const arr = ['reference', 'index', 'indexEn']
      return arr.filter((i) => this.pageTypes.includes(i))
    }
  },
  methods: {
    getPropsData(pageType) {
      return this.pageList.find((i) => i.pageType === pageType)
    },
    getPageId(pageType) {
      return this.pageList.find((i) => i.pageType === pageType)?.pageId
    }
  }
}
</script>

<style>
.hide-page-wrapper {
  display: none;
}
</style>
<style lang="scss" scoped>
@import "/tinymce/skins/content/default/custom.css";
</style>
